<template>
  <div class="menulist">
    <div style="margin-bottom: 5px">
      <el-button type="primary" size="mini" @click="newlyCode">
        {{ $t('market.addGroup') }}<!--新增分组-->
      </el-button>
      <el-button type="danger" size="mini">
        {{ $t('market.delGroup') }}<!--删除分组-->
      </el-button>
      <el-button type="primary" size="mini" @click="configuration">
        {{ $t('btn.deploy') }}<!--配置-->
      </el-button>
    </div>
    <div class="rateContent">
      <div class="sibarLeft">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          node-key="fid"
          :default-expanded-keys="fidKeys"
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="table-content">
        <jc-table
          sortable
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
          serial
        >
          <template v-slot:btnState="col">
            <el-checkbox v-model="col.scope.row.fproductstatus" disabled>{{ $t('market.startUsing') }}</el-checkbox>
          </template>
          <!--     产品尺寸     -->
          <template v-slot:billSlot="col">
            <el-checkbox v-model="col.scope.row.flength" disabled>{{ $t('market.length') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fwidth" disabled>{{ $t('market.width') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fheight" disabled>{{ $t('market.height') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fvolume" disabled>{{ $t('market.volume') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fthickness" disabled>{{ $t('market.thickness') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fopenlength" disabled>{{ $t('market.openlength') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fopenwidth" disabled>{{ $t('market.openwidth') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fopenheight" disabled>{{ $t('market.openheight') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fopenvolume" disabled>{{ $t('market.openvolume') }}</el-checkbox>
            <el-checkbox v-model="col.scope.row.fopenthickness" disabled>{{ $t('market.openthickness') }}</el-checkbox>
          </template>
          <template v-slot:btnStates="col">
            <el-checkbox v-model="col.scope.row.fpackingstatus" disabled>{{ $t('market.startUsing') }}</el-checkbox>
          </template>
          <!--     包装尺寸     -->
          <template v-slot:tagSlot="col">
            <el-checkbox v-model="col.scope.row.fpacklength" disabled>长</el-checkbox>
            <el-checkbox v-model="col.scope.row.fpackwidth" disabled>宽</el-checkbox>
            <el-checkbox v-model="col.scope.row.fpackheight" disabled>高</el-checkbox>
          </template>
          <!-- 操作 -->
          <template v-slot:btnSlot="col">
            <el-button size="mini" type="warning" @click="editCode(col.scope.row)">{{ $t('btn.edit') }}</el-button>
          </template>
        </jc-table>
      </div>
      <!--  新增修改分组弹窗  -->
      <el-dialog
        :title="contentRig"
        model
        :visible.sync="openWarehouse"
        :close-on-click-modal="false"
        top="5vh"
        width="600px"
      >
        <el-form :model="codeDate" label-width="100px">
          <el-form-item :label="$t('shop.name1')">
            <el-input v-model.trim="codeDate.fname" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('shop.fnumber')">
            <el-input v-model.trim="codeDate.fnumber" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.connector')">
            <el-input v-model.trim="codeDate.fconnector" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.days')">
            <el-input v-model.trim.number="codeDate.fdays" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.parent')">
            <el-input v-model="codeDate.fparent" disabled size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.category')">
            <el-autocomplete
              ref="custom"
              v-model.trim="codeDate.fcategoryname"
              highlight-first-item
              popper-class="my-autocomplete"
              :fetch-suggestions="querySearch18"
              size="mini"
              @focus="getBasicUnit('SX_V_UNIT_CATEGORYID')"
              @select="selUnit"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="cliUnit('SX_V_UNIT_CATEGORYID')"
              />
              <template slot-scope="{ item }">
                <div class="name">{{ item.fname }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item :label="$t('market.materialGroup')">
            <el-input v-model.trim="codeDate.fmaterialgroupname" size="mini">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handleGroup1"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.stock2')">
            <el-input
              v-model="codeDate.fstockname"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="seleceVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.productSpec')">
            <el-checkbox v-model="codeDate.fproductstatus">{{ $t('market.startUsing') }}</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox @change="handleCheckAllChange">{{ $t('market.allCheck') }}</el-checkbox>
            <el-checkbox v-model="codeDate.flength">{{ $t('market.length') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fwidth">{{ $t('market.width') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fheight">{{ $t('market.height') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fvolume">{{ $t('market.volume') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fthickness">{{ $t('market.thickness') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fopenlength">{{ $t('market.openlength') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fopenwidth">{{ $t('market.openwidth') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fopenheight">{{ $t('market.openheight') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fopenvolume">{{ $t('market.openvolume') }}</el-checkbox>
            <el-checkbox v-model="codeDate.fopenthickness">{{ $t('market.openthickness') }}</el-checkbox>
          </el-form-item>
          <!--          <el-form-item label="包装尺寸">-->
          <!--            <el-checkbox v-model="codeDate.fpackingstatus">{{ $t('market.startUsing') }}</el-checkbox>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item>-->
          <!--            <el-checkbox v-model="codeDate.fpacklength">长</el-checkbox>-->
          <!--            <el-checkbox v-model="codeDate.fpackwidth">宽</el-checkbox>-->
          <!--            <el-checkbox v-model="codeDate.fpackheight">高</el-checkbox>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-checkbox v-model="codeDate.fcontrol">是否管控</el-checkbox>
          </el-form-item>
          <el-form-item label="物料规格拼接">
            <el-select v-model="codeDate.fspecjoinid" filterable :disabled="!codeDate.fcontrol">
              <el-option
                v-for="iten in staffDate"
                :key="iten.fid"
                :label="iten.fname"
                :value="iten.fid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物料属性拼接">
            <el-select v-model="codeDate.fattrjoinid" filterable :disabled="!codeDate.fcontrol">
              <el-option
                v-for="iten in staffDate2"
                :key="iten.fid"
                :label="iten.fname"
                :value="iten.fid"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.descrip')">
            <el-input v-model.trim="codeDate.fdescription" size="mini" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{ $t('btn.save') }}</el-button>
            <el-button @click="openWarehouse=false">{{ $t('btn.cancel') }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--  业务操作配置 弹窗  -->
      <el-dialog
        :title="$t('btn.deploy')"
        model
        :visible.sync="isconfigDialog"
        :close-on-click-modal="false"
        width="600px"
        center
      >
        <div style="text-align: left;min-height: 100px;line-height: 30px">
          <el-checkbox-group v-model="configDe">
            <el-checkbox v-for="item in allocation" :key="item" :label="item.fid">
              {{ item.fname }}
              <el-input v-model="item.fdescripTion" size="mini" :disabled="!configDe.includes(item.fid)" />
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="isconfigDialog = false">{{ $t('btn.cancel') }}</el-button>
          <el-button size="mini" type="primary" @click="configSuccess()">
            {{ $t('btn.confirm') }}
          </el-button>
        </span>
      </el-dialog>
    </div>
    <el-dialog
      :title="$t('market.materialGroup')"
      model
      :visible.sync="openCustomer"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="public-form">
        <el-tree
          :data="fgroupArray"
          :props="defaultProps1"
          @node-click="handleNodeClick1"
        />
      </div>
    </el-dialog>
    <unit v-if="unitVisabled" :msg="funit" @unit="selUnit" />
    <selectCK v-if="seleceVisiblit" @client="selectData" />
  </div>
</template>

<script>
import { queryContrast, insertMaterialNumber, updateMaterialNumber, queryGradeDetails } from '@/api/encodingRules/codeComparative'
import { queryCommon, updateCommon } from '@/api/purchaseManagement/purchaseOrder'
import { queryUserGroup } from '@/api/basicManagement/createMateriel'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'
import { splicingList } from '@/api/basicManagement/userGroup'

export default {
  name: 'CodeNewly',
  components: {
    selectCK: () => import('@/views/production/collect/components/seleceCK'),
    unit: () => import('@/views/basic/createMateriel2/components/unit')
  },
  mixins: [autocomplete],
  data() {
    return {
      unitVisabled: false, // 存货类型
      openCustomer: false, // 物料分组
      seleceVisiblit: false, // 仓库
      treeClickCount: 0, // 物料分组点击次数
      funit: '',
      fbillNo: 'fgroupName',
      staffDate: [],
      staffDate2: [],
      treeData: [
        {
          fname: '全部',
          fid: 0,
          children: []
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'fname'
      },
      defaultProps1: {
        children: 'details',
        label: 'fname'
      },
      fidKeys: [0],
      openWarehouse: false, // 弹窗
      tableData: [],
      tableHeader: [
        { label: this.$t('shop.name1'), prop: 'fname' },
        { label: this.$t('shop.fnumber'), prop: 'fnumber', width: '80' },
        { label: this.$t('market.connector'), prop: 'fconnector', width: '80' },
        { label: this.$t('market.days'), prop: 'fdays', width: '100' },
        { label: this.$t('market.stock2'), prop: 'fstockname', width: '100' },
        { label: this.$t('market.category'), prop: 'fcategoryname', width: '100' },
        { label: this.$t('market.materialGroup'), prop: 'fmaterialgroupname', width: '100' },
        { label: this.$t('market.productState'), type: 'state', width: '100' },
        { label: this.$t('market.productSpec'), type: 'bill', minWidth: '300', tooltip: true },
        { label: this.$t('market.baozState'), type: 'states', width: '100' },
        // { label: '包装尺寸', type: 'tag', width: '200' },
        { label: this.$t('market.handle'), type: 'btn', width: '80' }
      ],
      fgroupArray: [],
      contentRig: '新增分组',
      codeDate: {
        fid: 0,
        fnumber: '',
        fconnector: '',
        fparentid: 0,
        fdays: 0,
        fnum: 0,
        fparent: '全部',
        fname: '',
        fdescription: '',
        fcontrol: false,
        flength: false,
        fproductstatus: true,
        fwidth: false,
        fheight: false,
        fthickness: false,
        fopenlength: false,
        fopenwidth: false,
        fopenheight: false,
        fopenvolume: false,
        fopenthickness: false,
        fpackingstatus: true,
        fpacklength: false,
        fpackwidth: false,
        fpackheight: false
      },
      allocation: [],
      configDe: [],
      fnum: 0,
      isconfigDialog: false,
      indexSelf: 0,
      tableHeight: '83vh'
    }
  },
  created() {
    this.handleGroup() // 物料分组
  },
  methods: {
    // 打开物料分组
    async handleGroup() {
      const { data: res } = await queryContrast({})
      this.treeData[0].children = res
      this.treeData[0].children.map((item, index) => {
        item.index = index
      })
      this.tableData = res[this.indexSelf].children
    },
    // 点击分组
    handleNodeClick(data) {
      // 新增分组使用数据
      this.fparentid = data.fid
      this.fparent = data.fname
      this.fnum = data.fnum
      this.indexSelf = data.index
      this.rightData(data.fid)
    },
    // 获取右侧数据
    rightData(fid) {
      queryGradeDetails({ fid }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    // 新增分组
    newlyCode() {
      this.openWarehouse = true
      this.contentRig = this.$t('market.addGroup')
      this.fidKeys[1] = this.fparentid
      this.codeDate = {
        fid: 0,
        fnumber: '',
        fconnector: '-',
        fparentid: this.fparentid || 0,
        fparent: this.fparent,
        fdays: 0,
        fnum: this.fnum,
        fname: '',
        fdescription: ''
      }
    },
    // 拼接配置列表
    async getUserList(ev) {
      this.loading = true
      const DATA = {
        pageNum: this.pageNum,
        pageSize: this.size,
        search: [
          {
            field: 'ftype',
            seach: ev,
            fid: 7
          }
        ]
      }
      const { data: res } = await splicingList(DATA)
      if (ev === 'GGPJ') {
        this.staffDate = res.list
      } else {
        this.staffDate2 = res.list
      }
    },
    // 修改分组
    editCode(ev) {
      this.getUserList('SXPJ')
      this.getUserList('GGPJ')
      this.openWarehouse = true
      this.contentRig = this.$t('market.editGroup')
      this.fidKeys[1] = ev.fid
      this.codeDate = {
        ...ev,
        fparent: ev.fname
      }
    },
    // 新增 || 修改
    onSubmit() {
      const { fspecjoinid, fattrjoinid, fcontrol } = this.codeDate
      if (fcontrol) {
        if (!fspecjoinid && !fattrjoinid) {
          this.$confirm('物料规格拼接、物料属性拼接 必须选择！！！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          return
        }
      }
      const api = this.codeDate.fid === 0 ? insertMaterialNumber : updateMaterialNumber
      api({ ...this.codeDate }).then(res => {
        if (res.code === 0) {
          if (this.codeDate.fid === 0) {
            this.clearCode()
            this.handleGroup()
          }
          this.openWarehouse = false
          this.rightData(this.codeDate.fparentid)
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 配置弹窗
    configuration() {
      this.isconfigDialog = true
      this.gration()
    },
    // 配置项
    gration() {
      queryCommon({ fnumber: 'T_SX_MATERIALNUMBER' }).then(res => {
        this.allocation = res.data
        this.configDe = []
        this.allocation.forEach(res => {
          res.fvalue === '1' && this.configDe.push(res.fid)
        })
      })
    },
    // 配置确认
    configSuccess() {
      this.allocation.map(item => {
        if (this.configDe.length) {
          this.configDe.forEach(ite => {
            if (item.fid === ite) {
              item.fvalue = '1'
            }
          })
        } else {
          item.fvalue = '0'
        }
      })
      const DATA = this.allocation
      updateCommon(DATA).then(res => {
        if (res.code === 0) {
          this.configDe = []
          this.isconfigDialog = false
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    // 新增分组--打开物料分组
    async handleGroup1() {
      this.openCustomer = true
      const { data: res } = await queryUserGroup({})
      this.fgroupArray = res
    },
    // 物料分组
    handleNodeClick1(item) {
      this.treeClickCount++
      if (this.treeClickCount >= 2) return
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          this.treeClickCount = 0
        } else if (this.treeClickCount > 1) {
          this.treeClickCount = 0
          const { fid, fname } = item
          this.codeDate.fmaterialgroup = fid
          this.codeDate.fmaterialgroupname = fname
          this.openCustomer = false
        }
      }, 300)
    },
    // 存货类别
    cliUnit(ev) {
      this.funit = ev
      this.unitVisabled = true
    },
    // 存货类别
    selUnit(ev) {
      if (this.funit === 'SX_V_UNIT_CATEGORYID') {
        // 存货类别
        this.codeDate.fcategoryname = ev.fname
        this.codeDate.fcategoryid = ev.fid
      }
      this.unitVisabled = false
    },
    // 获取仓库数据
    selectData(ev) {
      if (ev.fstockId) {
        this.codeDate.fstockid = ev.fstockId
        this.codeDate.fstockname = ev.fname
      }
      this.seleceVisiblit = false
    },
    // 全选
    handleCheckAllChange(val) {
      this.codeDate.flength = val
      this.codeDate.fwidth = val
      this.codeDate.fheight = val
      this.codeDate.fvolume = val
      this.codeDate.fthickness = val
      this.codeDate.fopenlength = val
      this.codeDate.fopenwidth = val
      this.codeDate.fopenheight = val
      this.codeDate.fopenvolume = val
      this.codeDate.fopenthickness = val
    },
    // 清空数据
    clearCode() {
      this.codeDate = {
        fid: 0,
        fnumber: '',
        fconnector: '',
        fparentid: 0,
        fparent: '全部',
        fname: '',
        fnum: 0,
        fdescription: '',
        fstockid: '',
        fstockname: '',
        fcategoryid: '',
        fcategoryname: '',
        fmaterialgroup: '',
        fmaterialgroupname: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.menulist {
  @include listBom;
  .rateContent {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 5px;
    .sibarLeft {
      width: 20%;
      min-width: 170px;
      max-height: calc(100vh - 130px);
      overflow: auto;
      border-right: 1px solid #eee;
    }
    .table-content {
      width: 80%;
      margin: 0 10px;
    }
  }
  .el-form {
    .el-form-item{
      margin-bottom: 0;
    }
  }
}
</style>
